<template>
    
        <p>这是一个命令</p>
        <h1>{{msg}}</h1>
        <h1 v-html="htmlSpan"></h1>
        <img v-bind:src="imgUel" />
        <img src="//www.baidu.com/img/baidu_sylogo1.gif" />
        <button @click="btnAction">点击</button>
        <button v-on:click="btnAction">点击（0）</button>

        <p v-if="isAction">isAction是ture 222</p>
        <p v-else>isAction是false 111</p>
        <button @click="switchIsActive">点击事件</button>

        <p v-if="num ==0">num 为 0</p>
        <p v-else-if="num == 1">num为1</p>
        <p v-else>num 非 0 非 1</p>
        <button @click="changeNum(0)">num设置为0</button>
        <button @click="changeNum(1)">num设置为1</button>
        <button @click="changeNum(2)">num设置为2</button>

        <p v-for="(item,index) in arr">item是{{ item }},index是{{ index }}</p>
        <p v-for="(value,key,index) in obj">
            value 是{{ value }},key是{{ key }},index是{{ index }}
        </p>
    
        <h2>配置信息</h2>
    <div>
        <label>昵称:</label>
        <input type="text" v-model="user.name">
    </div>
    <div>
        <label>性别:</label>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>

    <h2>登录</h2>
    <input type="text" placeholder="请输入你的账号" v-model="account">
    <input type="password" placeholder="请输入你的密码" v-model="password">

</template>

<script>
export default {
    data(){
        return{
            msg:"hello world",
            htmlSpan:"<span>这是一个html插值</span>",
            imgUel:"//www.baidu.com/img/baidu_sylogo1.gif",
            isAction: true,
            num:0,
            account:'',
            password:'',
            arr:["吃","喝","拉"],
            obj:{
                a:'吃',
                b:'喝',
                c:'拉'
            },
            user:{
                name:'',
                sex:'男',
                wish:[],
                group:'',
                remaek:''
            }
        }
    },
    methods:{
        btnAction() {
            console.log('123');
        },
        switchIsActive(){
            this.isAction = !this.isAction
        },
        changeNum(number){
            this.num = number
        }
    }
}
</script>